<template>
    <div class="domain">
        <div class="header">
            <div class="search-item">
                <p>渠道</p>
                <el-select v-model="searchQuery.channel_id" clearable placeholder="渠道名称" filterable >
                    <el-option v-for="item in callback_media_options" :key="item.id" :label="item.title"
                        :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="search-item">
                <p>域名类型</p>
                <el-select v-model="searchQuery.domain_type" placeholder="请选择" class="select-item" clearable>
                    <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="search-item">
                <p>投放主域名</p>
                <el-input v-model="searchQuery.main_domain" placeholder="请输入内容" class="sonIput" clearable></el-input>
            </div>
            <div class="search-item">
                <p>投放子域名</p>
                <el-input v-model="searchQuery.sub_domain" placeholder="请输入内容" class="sonIput" clearable></el-input>
            </div>
            <div class="button">
                <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
                <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
                <el-button type="primary" icon="el-icon-plus" @click="addMain">添加主域名</el-button>
            </div>
        </div>
        <div class="table">
            <el-table :data="tableData" v-loading="loading" style="width: 98%;margin: 20px  0 ;" row-key="id"
                :expand-row-keys="expands" :tree-props="{ children: 'children' }">
                <el-table-column prop="main_domain" label="域名" fixed>
                    <template slot-scope="scope">
                        {{ scope.row.parent_id==0 ? scope.row.main_domain : scope.row.sub_domain }}
                    </template>
                </el-table-column>
                <el-table-column prop="channel_name" label="渠道" >
                </el-table-column>
                <el-table-column prop="domain_type" label="域名类型">
                    <template slot-scope="scope">
                        {{ scope.row.domain_type == 'proxy' ? '代理商' : '华寿仁' }}
                    </template>
                </el-table-column>
                <el-table-column prop="media_agent_name" label="主体/代理商">
                </el-table-column>
                <el-table-column prop="created_at" label="添加时间">
                </el-table-column>
                <el-table-column prop="wechat_name" label="操作" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" @click="addSon(scope.row)"
                            v-if="scope.row.parent_id == 0">添加子域名</el-button>
                        <el-button type="text" @click="edit(scope.row)" v-if="scope.row.parent_id == 0">修改</el-button>
                        <el-button type="text" @click="delDomains(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- <pagination class="footer-page" v-show="total > 0" :total="total" :page.sync="searchQuery.page"
                :limit.sync="searchQuery.pageSize" @pagination="init" /> -->
        </div>
        <el-dialog :title="diaTitle" :visible.sync="addMainFlag" center width="448px" append-to-body destroy-on-close
            @close="resetDio">
            <addDomain @mainSumbit="mainSumbit" :subFlag="sonFlag" :domain_id="editId"></addDomain>
        </el-dialog>
    </div>
</template>
<script>
import {getOptionListCs } from "@/api/order"
import { domainsList,destroyDomains } from "@/api/domain.js"
import addDomain from "./addDomain.vue";
export default {
    components:{
        addDomain
    },
    data() {
        return {
            Loading:false,
            sonFlag:false,
            diaTitle:"添加主域名",
            typeOptions:[
                {
                    label:'华寿仁',
                    value:'hsr'
                },
                {
                    label:'代理商',
                    value:'proxy'
                }
            ],
            callback_media_options:[],
            addMainFlag:false,
            searchQuery:{
                channel_id:'',
                domain_type:'',
                main_domain:'',
                sub_domain:''
            },
            tableData:[],
            editId:'',
            expands:[]
        }
    },
    methods: {
        resetDio(){
            this.addMainFlag=false,
            this.editId=''
        },
        mainSumbit(e){
          if(e){ 
             this.expands.push(String(this.editId))   
            this.expands=[...new Set(this.expands)]  
            }
            else{
                this.expands=[]  
            }
            this.addMainFlag=false
            this.sonFlag=false
            setTimeout(() => {
                this.init()
            }, 400);
        },
        addSon(item){ 
            this.editId=item.id
            this.sonFlag=true
            this.addMainFlag=true
            this.diaTitle="添加子域名"
        },
        edit(item){
            console.log(item)
            this.editId=item.id
            this.addMainFlag=true
            this.sonFlag=false
            this.diaTitle="修改主域名"
        },
        delDomains(item){
            this.expands.push(String(item.parent_id))
            this.expands=[...new Set(this.expands)]  
            destroyDomains({main_domain_id:item.id}).then(res=>{
                this.$message.success(`删除成功`);
                setTimeout(() => {
                this.init()
                 }, 400);
            })
        },
        init(){
            this.loading=true
            domainsList(this.searchQuery).then(res=>{
                this.tableData=res.data
                this.loading=false
            })
        },
        addMain(){
            this.editId=''
            this.diaTitle="添加主域名"
            this.addMainFlag=true
            this.sonFlag=false
        },
        search(){                  
            this.init()
        },
        reset(){
            this.searchQuery={
                channel_id:'',
                domain_type:'',
                main_domain:'',
                sub_domain:''
            }
            this.init()
        }
    },
    created() {
       getOptionListCs().then(res=>{
        this.callback_media_options=res.data
      })
      this.init()
    },
}
</script>
<style lang="scss" scoped>
.domain {
    margin-top: 20px;
    width: 100%;

    .header {
        padding-left: 20px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;

        .search-item {
            display: flex;
            align-items: center;
            width: 400px;

            .select-item {
                min-width: 150px;
            }

            p {
                text-align: left;
                margin-left: 15px;
                margin-right: 20px;
                min-width: 70px;
                font-size: 14px;
                color: #606266;
                font-weight: 700;
            }

            .sonIput {
                min-width: 150px;
            }
        }

        .button {
            margin-left: 100px;
        }
    }

    .table {
        margin-left: 30px;
    }
}
</style>